import { ProFormUploadDragger } from "@ant-design/pro-components";
import { Card } from "antd";
import React, { ReactNode } from "react";
import FileUpload from "@/assets/image/patterns/File Upload.png";
import upload from "@/assets/image/patterns/Upload.png";
import { CloseOutlined } from "@ant-design/icons";
import { FileContainer, FileImage, FileInfo, FileName } from "..";
interface Props {
  title?: string;
  name?: any;
  required?: boolean;
  childrens?: ReactNode;
}

const UploadDragger: React.FC<Props> = ({
  // title,
  required = false,
  name,
}: // childrens,
Props) => {
  console.log(name, "name111");
  // const [isUploaded, setIsUploaded] = useState(false);
  // const [uploadedFile, setUploadedFile] = useState() as any;

  const handleUploadSuccess = (response: any) => {
    console.log(response, "response");
    // setIsUploaded(true);
    // setUploadedFile(response.file);
  };

  // const handleDeleteUpload = () => {
  //   setIsUploaded(false);
  //   setUploadedFile(null);
  // };

  return (
    <>
      {/* {isUploaded ? ( */}
      <>
        {/* <Card
            style={{ width: "50%", marginBottom: "10px" }}
            styles={{
              body: {
                display: "flex",
                alignItems: "center",
              },
            }}
          >
            <img
              src={URL.createObjectURL(uploadedFile)}
              alt="Uploaded Image"
              style={{ width: "64px", height: "64px", marginRight: "10px" }}
            />
            <div style={{ width: "84px", height: "64px", overflow: "hidden" }}>
              {uploadedFile?.name}
            </div>
            <CloseOutlined
              onClick={handleDeleteUpload}
              style={{ marginLeft: "auto" }}
            />
          </Card> */}
        {/* {childrens && (
          <Card style={{ backgroundColor: "#F6F6F6" }} styles={{}}>
            <div style={{ marginBottom: "20px" }}>{title}</div>
          </Card>
        )} */}
        {/* </Space> */}
      </>
      {/* ) : ( */}
      <ProFormUploadDragger
        className="formUpload"
        max={1}
        title={
          <>
            Drag or{" "}
            <span style={{ color: "#7A6145", textDecoration: "underline" }}>
              Browse
            </span>
          </>
        }
        icon={<img src={upload} alt="upload" />}
        description={`The file size cannot exceed 5MB.\n
Acceptable formats for submission: PDF, PNG and JPG.`}
        rules={[
          {
            required,
            message: "This field is required",
          },
        ]}
        fieldProps={{
          multiple: false,
          accept: ".jpg, .jpeg, .png,.pdf",

          onChange: (info) => {
            if (info.fileList.length > 1) {
              info.fileList.shift();
            }
          },
          itemRender: (_, file, __, remove) => (
            <>
              <Card
                className="procard11"
                style={{
                  maxWidth: "50%",
                  marginTop: "10px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
                hoverable
                bordered
                styles={{
                  body: { width: "100%" }, // 使用 styles.body 替代 bodyStyle
                }}
              >
                <FileContainer>
                  <FileImage src={FileUpload} alt="FileUpload" />
                  <FileInfo>
                    <FileName className="file-name">{file.name}</FileName>
                    {/* <FileSize className="file-size">{fileSize}</FileSize> */}
                  </FileInfo>
                  <CloseOutlined
                    onClick={() => remove.remove()}
                    style={{ marginLeft: "auto", fontSize: "24px" }}
                  />
                </FileContainer>
              </Card>
            </>
          ),
          customRequest: ({ file, onSuccess }) => {
            // @ts-ignore
            onSuccess({ file });
            handleUploadSuccess({ file });
          },
        }}
        label=""
        // name={["privateCar", "dpppFile", "uploadFile"]}
        name={name}
      ></ProFormUploadDragger>
      {/* )} */}
    </>
  );
};

export default UploadDragger;
